<template>
  <div>
    <div id="tags-view-container" class="tags-view-container">
      <scroll-pane ref="scrollPane" class="tags-view-wrapper">
        <span
          v-for="(item, index) in schedules"
          :id="'schedule' + item.id"
          :key="index"
          class="tags-view-item"
          @click.stop="onScheduleChanged(index, item)"
        >
          <span>
            <span style="float:left">
              <el-tooltip class="item" effect="dark" placement="bottom">
                <div slot="content">{{ item.scheduleSubject }}</div>
                <span style="font-weight:bold;">{{ item.scheduleSubject | ellipsis }}</span>
              </el-tooltip>
            </span>
            <span style="float:right;width: 50px;padding-right:20px;">{{ showNameByValue(item.scheduleGroup, parent.getSelector().scheduleGroups) }}</span>
            <br>
            <span style="float:left;width: 50px;">{{ showNameByValue(item.scheduleType, parent.getSelector().scheduleTypes) }}</span>
            <span style="padding-left:17px;width: 100px;float:left"><i class="el-icon-time" />{{ parseToString(item.effDate, 'yyyy-MM-dd') }}</span>
            <span style="float:right">
              <el-tag v-if="item.dataStatus === 2" type="danger" size="mini">{{ showNameByValue(item.dataStatus, parent.getSelector().scheduleStatusList) }}</el-tag>
              <el-tag v-else size="mini">{{ showNameByValue(item.dataStatus, parent.getSelector().scheduleStatusList) }}</el-tag>
            </span>
          </span>
        </span>
      </scroll-pane>
    </div>
    <div class="head-context" style="margin-top: 15px;margin-bottom: 10px;">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-card :body-style="{ padding: '0px' }" shadow="always">
            <el-form :model="schedule" :inline="true" label-width="auto" size="mini">
              <el-form-item label="主题:"><span>{{ schedule.scheduleSubject | ellipsis }}</span></el-form-item>
              <el-form-item label="部类:">
                {{ showNameByValue(schedule.scheduleType, parent.getSelector().scheduleTypes) }}
              </el-form-item>
              <el-form-item label="档期类型:">
                <span v-if="schedule.scheduleGroup !== null || schedule.scheduleGroup !== ''">
                  {{ showNameByValue(schedule.scheduleGroup, parent.getSelector().scheduleGroups) }}
                </span>
                <span v-else>
                  --
                </span>
              </el-form-item>
              <el-form-item label="开始日期:">
                {{ parseToString(new Date(schedule.effDate), 'yyyy-MM-dd') }}
              </el-form-item>
              <el-form-item label="结束日期:">
                {{ parseToString(new Date(schedule.operationEndDate), 'yyyy-MM-dd') }}
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import ScrollPane from './ScrollPane'
import { showNameByValue } from '@/utils/selectUtil'
import { parseToString } from '@/utils/datefromat'
import { getPublishedList } from '@/api/olm/schedule'

export default {
  components: { ScrollPane },
  filters: {
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 26) {
        return value.slice(0, 26) + '...'
      }
      return value
    }
  },
  props: {
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      schedules: [],
      schedule: {}
    }
  },
  created() {
    this.$nextTick(() => {
      this.loadSchedule()
    })
  },
  methods: {
    showNameByValue,
    parseToString,
    onScheduleChanged(index, schedule) { // 设置选中的档期背景颜色
      if (schedule.id === this.schedule.id) {
        return
      }
      if (this.schedules) {
        this.schedules.forEach(item => {
          var node2 = document.getElementById('schedule' + item.id)
          if (node2) {
            node2.style.backgroundColor = ''
            node2.style.color = ''
          }
        })
      }
      var node = document.getElementById('schedule' + schedule.id)
      if (node) {
        node.style.backgroundColor = '#409EFF'
      }
      this.schedule = schedule
      this.parent.schedule = schedule
      this.parent.params.scheduleId = schedule.id
      this.parent.toQuery()
    },
    loadSchedule() { // 加载档期
      var _this = this
      getPublishedList().then(res => {
        if (res) {
          _this.schedules = res
          if (res.length > 0) {
            setTimeout(function() {
              _this.onScheduleChanged(0, _this.schedules[0])
            }, 1000)
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.tags-view-container {
  height: 59px;
  width: 100%;
  //background: #fff;
  border-bottom: 1px solid #d8dce5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
  .tags-view-wrapper {
    .tags-view-item {
      display: inline-block;
      position: relative;
      cursor: pointer;
      height: 55px;
      width: 250px;
      line-height: 26px;
      border: 1px solid #d8dce5;
      color: #495060;
      //background: #fff;
      padding: 0 8px;
      font-size: 14px;
      margin-left: 15px;
      margin-top: 0px;
      margin-bottom: 0px;
      &.active {
        background-color: #42b983;
        color: #fff;
        border-color: #42b983;
        &::before {
          content: '';
          background: #fff;
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          position: relative;
          margin-right: 2px;
        }
      }
    }
  }
}
.head-context >>> .el-form-item--mini.el-form-item {
  margin-bottom: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
}
</style>
